<script lang="tsx" setup>
import { onMounted, reactive, ref } from 'vue';
import type { FormRules } from 'naive-ui';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import type { ResetPwdVO } from '@/service/types/system';
import { updateUserPwd } from '@/service/api/system/user';
type Model = Pick<ResetPwdVO, 'oldPassword' | 'newPassword' | 'confirmPassword'>;
defineOptions({
  name: 'PasswordForm'
});
function createDefaultModel(): Model {
  return {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  };
}
const model: Model = reactive(createDefaultModel());
const { formRef, validate, restoreValidation } = useNaiveForm();
const { formRules, createConfirmPwdRule } = useFormRules();

const rules: FormRules = {
  oldPassword: {
    required: true,
    message: '旧密码不能为空',
    trigger: 'blur'
  },
  newPassword: formRules.password,
  confirmPassword: [
    { required: true, message: '确认密码不能为空' },
    {
      asyncValidator: (rule, value) => {
        if (value.trim() !== '' && value !== model.newPassword) {
          return Promise.reject(rule.message);
        }
        return Promise.resolve();
      },
      message: '两次密码不一致',
      trigger: 'input'
    }
  ] // createConfirmPwdRule(model.newPassword)
};
const loading = ref<boolean>(false);

const reset = () => {
  Object.assign(model, createDefaultModel());
};
onMounted(() => {
  restoreValidation();
});
const submit = async () => {
  await validate();
  loading.value = true;
  const { ...params } = model;
  // 提交表单
  const { data, error } = await updateUserPwd(params.confirmPassword, params.newPassword);
  loading.value = false;
  if (!error) {
    (window as any).$message?.success(data?.msg);
  }
};
</script>

<template>
  <NForm ref="formRef" :model="model" :rules="rules">
    <NGrid responsive="screen" item-responsive>
      <NFormItemGi span="24 s:24 m:24" label="旧密码" path="oldPassword">
        <NInput
          v-model:value="model.oldPassword"
          clearable
          type="password"
          show-password-on="click"
          placeholder="旧密码"
        />
      </NFormItemGi>
      <NFormItemGi span="24 s:24 m:24" label="新密码" path="newPassword">
        <NInput
          v-model:value="model.newPassword"
          clearable
          type="password"
          show-password-on="click"
          placeholder="新密码"
        />
      </NFormItemGi>
      <NFormItemGi span="24 s:24 m:24" label="确认密码" path="confirmPassword" feedback-style="min-height: 0px;">
        <NInput
          v-model:value="model.confirmPassword"
          clearable
          type="password"
          show-password-on="click"
          placeholder="确认密码"
        />
      </NFormItemGi>
      <NFormItemGi span="24 s:24 m:24">
        <NSpace class="w-full" justify="start">
          <NButton @click="reset">
            {{ $t('common.reset') }}
          </NButton>
          <NButton type="primary" :loading="loading" @click="submit">保存</NButton>
        </NSpace>
      </NFormItemGi>
    </NGrid>
  </NForm>
</template>

<style lang="scss" scoped></style>
